<!-- 效益曲线表 -->
<template>
    <div ref="chart" :style="{ width: '100%', height: '100%' }"></div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

export default defineComponent({
    name: 'EfficiencyCurveChart',
    setup() {
        const chart = ref<HTMLElement | null>(null);
        let myChart: echarts.ECharts | null = null;

        const initChart = () => {
            if (chart.value) {
                myChart = echarts.init(chart.value);

                const option: echarts.EChartsOption = {
                    tooltip: {
                        trigger: 'axis',
                    },
                    legend: {
                        data: ['产值', '工资支出', '收益'],
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            name: '产值',
                            type: 'line',
                            data: [120, 132, 101, 134, 90, 230, 210],
                        },
                        {
                            name: '工资支出',
                            type: 'line',
                            data: [220, 182, 191, 234, 290, 330, 310],
                        },
                        {
                            name: '收益',
                            type: 'line',
                            data: [100, 110, 90, 120, 80, 200, 190],
                        },
                    ],
                };

                myChart.setOption(option);
            }
        };

        onMounted(() => {
            initChart();
        });

        onBeforeUnmount(() => {
            if (myChart) {
                myChart.dispose();
            }
        });

        return {
            chart,
        };
    },
});
</script>

<style scoped>

</style>